<template>
  <div class="edit-container">
    <div class="top">
      <van-form validate-first @submit="onSubmit">
        <p>基本信息</p>

        <!-- 创建人-->

        <van-field
          v-model="pageData.createName"
          readonly
          label="创建人"
          placeholder="创建人"
          :rules="[{ required: true, message: '请输入创建人' }]"
        />

        <!-- 创建时间-->
        <van-field
          v-model="pageData.createTime"
          label="创建时间"
          placeholder="创建时间"
          :rules="[{ validator, message: '请输入创建时间' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#69c0ff"
              @click="showTime = true"
              native-type="button"
              >选择时间</van-button
            >
          </template></van-field
        >
        <!-- 项目名称 -->
        <van-field
          v-model="pageData.projectName"
          label="创建项目"
          placeholder="创建项目"
          :rules="[{ validator, message: '请输入创建项目' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#69c0ff"
              @click="showProject = true"
              native-type="button"
              >选择项目</van-button
            >
          </template></van-field
        >

        <p>材料信息</p>
        <van-field
          v-model="pageData.materialName"
          label="材料名称"
          name=" materialName"
          placeholder="材料名称"
          :rules="[{ validator, message: '请输入材料名称' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#69c0ff"
              native-type="button"
              @click="showMaterial = true"
              >选择材料</van-button
            >
          </template></van-field
        >

        <van-field
          v-model="pageData.materialWeight"
          label="采购数量"
          name="materialWeight"
          placeholder="采购数量"
          :rules="[{ required: true, message: '请输入采购数量' }]"
        />
        <van-field
          v-model="pageData.materialUnit"
          label="计量单位"
          name="materialUnit"
          placeholder="计量单位"
          :rules="[{ required: true, message: '请输入计量单位' }]"
        />
        <van-field
          v-model="pageData.price"
          label="采购单价"
          name=" price"
          placeholder="请输入采购单价"
          :rules="[{ required: true, message: '请输入采购单价' }]"
        />
        <p>供应商信息</p>
        <van-field
          v-model="pageData.supplierName"
          label="名称"
          name=" supplierName"
          placeholder="请选择供应商"
          :rules="[{ validator, message: '请输入创建项目' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#69c0ff"
              native-type="button"
              @click="showSuplier=true"
              >选择供应商</van-button
            >
          </template></van-field
        >
        <van-field
          v-model="pageData.supplierContact"
          label="联系人"
          name="supplierContact"
          placeholder="请输入联系人"
          :rules="[{ required: true, message: '请输入采购单价' }]"
        />
        <van-field
          v-model="pageData.supplierPhone"
          label="联系电话"
          name=" supplierPhone"
          placeholder="请输入联系电话"
          :rules="[{ required: true, message: '请输入联系电话' }]"
        />

        <p>审批信息</p>
        <van-field
          v-model="pageData.nextId"
          name="nextId"
          label="审批人"
          placeholder="审批人"
          :rules="[{ validator, message: '审批人' }]"
        >
          <!-- #button 它是slot="button"的简写 -->
          <template #button>
            <van-button
              size="small"
              color="#69c0ff"
              @click="showApproval= true"
              native-type="button"
              type="primary"

              >选择审批人</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="pageData.remark"
          name="remark"
          label="备注"
          rows="2"
          type="textarea"
          maxlength="50"
          show-word-limit
          placeholder="备注"
        />
        <van-button
          type="primary"
          block
          color="#40a9ff"
          style="margin-top: 10px"
          >提交</van-button
        >
      </van-form>
    </div>

    <!-- 选择时间的组件，showTime需要在上面“选择时间”这个按钮上时绑定点击事件 -->
    <van-calendar v-model="showTime" @confirm="timePickEvt" />
    <!-- 选择项目的弹出层组件 -->
    <van-popup
      v-model="showProject"
      position="right"
      :style="{ height: '100%', width: '50%' }"
    >
      <input type="text" placeholder="请输入项目名称" v-model="projectName1" />
      <ul>
        <li @click='pickProject(i)' v-for="i in projectList" :key="i.id">{{ i.name }}</li>
      </ul>
    </van-popup>
    <!-- 选择材料   组价 -->
    <van-popup
      v-model="showMaterial"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <input type="text" placeholder="请输入材料名称" v-model="materiaName" />
      <ol>
        <li v-for="i in materiaList" :key="i.id" @click="materiaPick(i)">{{ i.name }}</li>
      </ol>
    </van-popup>
    <!-- 选择供应商 组件 -->
    <van-popup v-model="showSuplier" position="bottom" :style="{ height: '50%' }">
      <input type="text" placeholder="请输入供应商" v-model="supplierName" />
      <ul>
        <li v-for="i in supplierList" :key="i.id" @click="pickSuplier(i)">{{ i.name }}</li>
      </ul>
    </van-popup>
    <!-- 选择审批人 -->
    <van-popup v-model="showApproval" position="bottom" :style="{ height: '50%' }">
      <input type="text" placeholder="请输入审批人" v-model="userInfo.name" />
      <ul>
        <li @click="pickApproval(userInfo)">{{userInfo.name }}</li>
      </ul>
    </van-popup>
  </div>
</template>
<script>
import moment from 'moment'
import {
  projectListApi,
  supplierListApi,
  purchaseSaveApi,
  productListApi
} from '@/Apis/homeApi'
export default {
  name: 'edit',

  data () {
    return {
      showTime: false,
      showProject: false,
      showMaterial: false,
      showSuplier: false,
      showApproval: false,
      projectList: [],
      materiaList: [],
      supplierList: [],

      projectName1: '',
      materiaName: '',
      supplierName: '',
      materiaTimer: null,
      supplierTimer: null,
      timer: null,

      pattern: /\d{6}/,
      pageData: {
        nextId: '',
        createId: '',
        createName: '',
        createTime: '',
        projectId: '',
        projectName: '',
        materialId: '',
        materialName: '',
        materialUnit: '',
        materialWeight: '',
        price: '',
        supplierId: '',
        supplierName: '',
        supplierContact: '',
        supplierPhone: '',
        remark: ''
      }
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters['common/userInfo']
    }

  },
  watch: {
    // 选择项目**************************************

    showProject (val) {
      if (val) {
        projectListApi({
          name: this.projectName,
          page: 1,
          size: 10
        }).then((d) => {
          this.projectList = d.data.rows
        })
      }
    },
    // 表单输入框与弹出层输入框绑定同样的value=====模糊查询(实现复杂)
    // 'pageData.projectName' (val) {
    //   this.projectName = val
    // }
    // 项目搜索防抖**************************************************
    projectName1 () {
      clearTimeout(this.timmer)
      this.timer = setTimeout(() => {
        projectListApi({
          name: this.projectName1,
          page: 1,
          size: 10
        }).then((d) => {
          this.projectList = d.data.row
          console.log(d, '搜索项目')
        })
      }, 600)
    },
    // 选择材料**********************************************************
    showMaterial (val) {
      if (val) {
        productListApi().then((d) => {
          this.materiaList = d.data.rows
        })
      }
    },
    // 搜索材料************************************************************
    materiaName () {
      clearTimeout(this.materiaTimer)
      this.materiaTimer = setTimeout(() => {
        productListApi().then((d) => {
          this.materiaList = d.data.rows
          console.log(d, '搜索材料')
        })
      }, 500)
    },
    // 选择供应商******************************************************************
    showSuplier (val) {
      if (val) {
        supplierListApi({
          name: this.supplierName,
          page: 1,
          size: 10
        }).then(d => {
          console.log(d, '供应商')
          this.supplierList = d.data.rows
        })
      }
    },
    // 搜索供应商******************************************************************
    supplierName () {
      clearTimeout(this.supplierTimer)
      this.supplierTimer = setTimeout(() => {
        supplierListApi({
          name: this.supplierName,
          page: 1,
          size: 10
        }).then(d => {
          this.supplierList = d.data.rows
          console.log(d, '搜索供应商')
        }, 1500)
      })
    }
  },
  created () {
    // 给创建人赋值***********************************************
    this.pageData.createId = this.userInfo.id
    this.pageData.createName = this.userInfo.name
  },
  methods: {
    // 含有validator的校验***********
    validator (val) {
      return val.trim() !== ''
    },
    // 时间选择器  组件********************
    timePickEvt (date) {
      //   console.log(arguments)//查看这个函数内有哪些参数
      //   时间格式化的使用
      this.pageData.createTime = moment(date).format('yyyy - MM - DD')
      this.showTime = false
    },
    // 提交事件*****************************************************************
    async onSubmit () {
      const obj = { ...this.pageData, nextId: [this.pageData.nextId] }
      //   let result
      //   if (this.isEdit) {
      //     result = await purchaseUpdateApi(obj)
      //   } else {
      const result = await purchaseSaveApi(obj)
      //   }

      if (result.code === 200) {
        // this.$toast.success(`${this.isEdit ? '编辑' : '新增'}订单成功`)
        this.$toast.success('新增订单成功')
        // 编辑以后，需要切换为新增
        // this.isEdit = false
        this.pageData = {
          nextId: '',
          createId: '',
          createName: '',
          createTime: '',
          projectId: '',
          projectName: '',
          materialId: '',
          materialName: '',
          materialUnit: '',
          materialWeight: '',
          price: '',
          supplierId: '',
          supplierName: '',
          supplierContact: '',
          supplierPhone: '',
          remark: ''
        }
      } else {
        // this.$toast.fail(`${this.isEdit ? '编辑' : '新增'}订单失败`)
        this.$toast.fail('新增订单失败')
      }
    },
    // 选择项目***********************************************
    pickProject (row) {
      console.log(row, 'data')
      this.pageData.projectId = row.id
      this.pageData.projectName = row.name
      this.showProject = false
    },
    // 选择材料***********************************************

    materiaPick (row) {
      console.log(row, 111)
      this.pageData.materialId = row.id
      this.pageData.materialName = row.name
      this.pageData.price = row.price
      this.showMaterial = false
    },
    // 选择供应商***********************************************

    pickSuplier (row) {
      console.log(row)
      this.pageData.supplierId = row.id
      this.pageData.supplierName = row.name
      this.pageData.supplierPhone = row.phone
      this.pageData.supplierContact = row.contact
      this.showSuplier = false
    },
    // 选择审批人***********************************************
    pickApproval (row) {
      this.pageData.nextId = row.name
      this.showApproval = false
    }
  }
}
</script>
<style lang="less" scoped>
@import "@/style/common.less";
.edit-container {
  .van-popup{
    background-color:  rgb(249, 251, 255);
  }
  p {
    font-size: 0.8rem;
    color: grey;
  }
  .top {
    width: 90%;
    margin: 10px auto;
    p {
      font-size: 0.8rem;
      color: grey;
    }
  }
  input {
    margin-top: 5px;
    outline:none;
    border:1px solid @c9;
  }
  ul{

    li{
  font-size:.8rem;
      border-bottom:1px solid @c7;
      height:30px;
      line-height:30px;
    }
  }
}
</style>
